<template>
    <div class="app-container">
        <div class="total-layout">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="total-frame">
                        <svg-icon icon-class="order" class="total-icon">
                        </svg-icon>
                        <div class="total-title">今日下单</div>
                        <div class="total-value">{{orderData.nowOrderCount}}</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-frame">
                        <svg-icon icon-class="total-today" class="total-icon">
                        </svg-icon>
                        <div class="total-title">今日销售总额</div>
                        <div class="total-value">￥{{orderData.nowOrderPay}}</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-frame">
                        <svg-icon icon-class="total-yesterday" class="total-icon">
                        </svg-icon>
                        <div class="total-title">昨日销售总额</div>
                        <div class="total-value">￥{{orderData.yesOrderPay}}</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-frame">
                        <svg-icon icon-class="total-week" class="total-icon">
                        </svg-icon>
                        <div class="total-title">近7天销售总额</div>
                        <div class="total-value">￥{{orderData.qiOrderPay}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="un-handle-layout">
            <div class="layout-title">待处理事务</div>
            <div class="un-handle-content">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">待付款订单</span>
                            <span style="float: right" class="color-danger">({{orderStatusCount.status0}})</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">已完成订单</span>
                            <span style="float: right" class="color-danger">({{orderStatusCount.status3}})</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">已发货订单</span>
                            <span style="float: right" class="color-danger">({{orderStatusCount.status2}})</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">待发货订单</span>
                            <span style="float: right" class="color-danger">({{orderStatusCount.status1}})</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">已关闭订单</span>
                            <span style="float: right" class="color-danger">({{orderStatusCount.status4}})</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">待处理退款申请</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">已发货订单</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">待处理退货订单</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">广告位即将到期</span>
                            <span style="float: right" class="color-danger">(10)</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="overview-layout">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="out-border">
                        <div class="layout-title">商品总览</div>
                        <div style="padding: 40px">
                            <el-row>
                                <el-col :span="6" class="color-danger overview-item-value">{{goods.offCount}}</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">{{goods.onCount}}</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">{{goods.nowCount}}</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">{{goods.allCount}}</el-col>
                            </el-row>
                            <el-row class="font-medium">
                                <el-col :span="6" class="overview-item-title">已下架</el-col>
                                <el-col :span="6" class="overview-item-title">已上架</el-col>
                                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                                <el-col :span="6" class="overview-item-title">全部商品</el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="out-border">
                        <div class="layout-title">用户总览</div>
                        <div style="padding: 40px">
                            <el-row>
                                <el-col :span="6" class="color-danger overview-item-value">{{user.nowCount}}</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">{{user.yesUserCount}}
                                </el-col>
                                <el-col :span="6" class="color-danger overview-item-value">{{user.qiUserCount}}</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">{{user.allCount}}</el-col>
                            </el-row>
                            <el-row class="font-medium">
                                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                                <el-col :span="6" class="overview-item-title">会员总数</el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="statistics-layout">
            <div class="layout-title">订单统计</div>
            <el-row>
                <el-col :span="4">
                    <div style="padding: 20px">
                        <div>
                            <div style="color: #909399;font-size: 14px">本月订单总数</div>
                            <div style="color: #606266;font-size: 24px;padding: 10px 0">{{orderData.monthOrderCount}}
                            </div>
                            <div>
                                <span class="color-success" style="font-size: 14px">+10%</span>
                                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <div style="color: #909399;font-size: 14px">本周订单总数</div>
                            <div style="color: #606266;font-size: 24px;padding: 10px 0">{{orderData.weekOrderCount}}
                            </div>
                            <div>
                                <span class="color-danger" style="font-size: 14px">-10%</span>
                                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <div style="color: #909399;font-size: 14px">本月销售总额</div>
                            <div style="color: #606266;font-size: 24px;padding: 10px 0">{{orderData.nowOrderCount}}
                            </div>
                            <div>
                                <span class="color-success" style="font-size: 14px">+10%</span>
                                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <div style="color: #909399;font-size: 14px">本周销售总额</div>
                            <div style="color: #606266;font-size: 24px;padding: 10px 0">{{orderData.nowOrderCount}}
                            </div>
                            <div>
                                <span class="color-danger" style="font-size: 14px">-10%</span>
                                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div style="padding: 10px;border-left:1px solid #DCDFE6">
                        <el-date-picker
                                style="float: right;z-index: 1"
                                size="small"
                                v-model="orderCountDate"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                @change="handleDateChange"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                        <div>
                            <ve-line
                                    :data="chartData"
                                    :legend-visible="false"
                                    :loading="loading"
                                    :data-empty="dataEmpty"
                                    :settings="chartSettings"></ve-line>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {str2Date} from '@/utils/date';
    import { communityUser } from '@/api/admin'
    import {goodsStatic, orderStatic, userStatic} from '@/api/home'
    import { get } from '@/utils/auth'
    const DATA_FROM_BACKEND = {
        columns: ['date', 'orderCount', 'orderAmount'],
        rows: [
            {date: '2018-11-01', orderCount: 10, orderAmount: 1093},
            {date: '2018-11-02', orderCount: 20, orderAmount: 2230},
            {date: '2018-11-03', orderCount: 33, orderAmount: 3623},
            {date: '2018-11-04', orderCount: 50, orderAmount: 6423},
            {date: '2018-11-05', orderCount: 80, orderAmount: 8492},
            {date: '2018-11-06', orderCount: 60, orderAmount: 6293},
            {date: '2018-11-07', orderCount: 20, orderAmount: 2293},
            {date: '2018-11-08', orderCount: 60, orderAmount: 6293},
            {date: '2018-11-09', orderCount: 50, orderAmount: 5293},
            {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
            {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
            {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
            {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
            {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
            {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
        ]
    };
    export default {
        name: 'home',
        data() {

            return {
                redList: null,
                communityUser:null,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            let start = new Date();
                            start.setFullYear(2018);
                            start.setMonth(10);
                            start.setDate(1);
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一月',
                        onClick(picker) {
                            const end = new Date();
                            let start = new Date();
                            start.setFullYear(2018);
                            start.setMonth(10);
                            start.setDate(1);
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                orderData: '',
                goods: '',
                user: '',
                orderStatusCount: '',
                orderCountDate: '',
                chartSettings: {
                    xAxisType: 'time',
                    area: true,
                    axisSite: {right: ['orderAmount']},
                    labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}
                },
                chartData: {
                    columns: [],
                    rows: []
                },
                loading: false,
                dataEmpty: false
            }
        },
        created() {
            this.initOrderCountDate();
            this.getData();

        },
        methods: {
            handleRed(id) {

                acceptRedPacket(id).then(response => {

                    this.$message({
                        message: response.data,
                        type: 'success',
                        duration: 1000
                    });


                });
            },
            handleDateChange() {
                this.getData();
            },
            initOrderCountDate() {
                orderStatic().then(res => {
                    if (res.code == 200) {
                        this.orderData = res.data;
                        this.orderStatusCount = res.data.orderStatusCount;
                    }

                });

                goodsStatic().then(res => {
                    if (res.code == 200) {
                        this.goods = res.data;
                    }

                });
                userStatic().then(res => {
                    if (res.code == 200) {
                        this.user = res.data;
                    }
                });



                let start = new Date();
                start.setFullYear(2018);
                start.setMonth(10);
                start.setDate(1);
                const end = new Date();
                end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
                this.orderCountDate = [start, end];
            },
            getData() {
                setTimeout(() => {
                    this.chartData = {
                        columns: ['date', 'orderCount', 'orderAmount'],
                        rows: []
                    };
                    for (let i = 0; i < DATA_FROM_BACKEND.rows.length; i++) {
                        let item = DATA_FROM_BACKEND.rows[i];
                        let currDate = str2Date(item.date);
                        let start = this.orderCountDate[0];
                        let end = this.orderCountDate[1];
                        if (currDate.getTime() >= start.getTime() && currDate.getTime() <= end.getTime()) {
                            this.chartData.rows.push(item);
                        }
                    }
                    this.dataEmpty = false;
                    this.loading = false
                }, 1000)
            }
        }
    }
</script>

<style scoped>
    .app-container {
        margin-top: 40px;
        margin-left: 120px;
        margin-right: 120px;
    }

    .total-layout {
    }

    .total-frame {
        border: 1px solid #DCDFE6;
        padding: 20px;
        height: 100px;
    }

    .total-icon {
        color: #409EFF;
        width: 60px;
        height: 60px;
    }

    .total-title {
        position: relative;
        font-size: 16px;
        color: #909399;
        left: 70px;
        top: -50px;
    }

    .total-value {
        position: relative;
        font-size: 18px;
        color: #606266;
        left: 70px;
        top: -40px;
    }

    .un-handle-layout {
        margin-top: 20px;
        border: 1px solid #DCDFE6;
    }

    .layout-title {
        color: #606266;
        padding: 15px 20px;
        background: #F2F6FC;
        font-weight: bold;
    }

    .un-handle-content {
        padding: 20px 40px;
    }

    .un-handle-item {
        border-bottom: 1px solid #EBEEF5;
        padding: 10px;
    }

    .overview-layout {
        margin-top: 20px;
    }

    .overview-item-value {
        font-size: 24px;
        text-align: center;
    }

    .overview-item-title {
        margin-top: 10px;
        text-align: center;
    }

    .out-border {
        border: 1px solid #DCDFE6;
    }

    .statistics-layout {
        margin-top: 20px;
        border: 1px solid #DCDFE6;
    }
</style>
